<template>
	<mainHeader title="统计">
		<view class="statistics_top">
			<monthSelectorVue :baseTime="theMonth" @overMonthChoose="monthChoose">
				<view class="statistics_time">
					{{theMonth}}
				</view>
			</monthSelectorVue>
			<image class="statistics_clear" @click="toNowmonth()" src="@/static/base/schedule.png"></image>
		</view>
	</mainHeader>
	<scroll-view scroll-y class="header_scroll">
		<view class="statistics">
			<view class="statistics_main_chart index_list_box base_box">
				<monthMainDataVue :month="theMonth" />
			</view>
			<view class="statistics_class_chart index_list_box base_box">
				<view class="statistics_class_chart_one">
					<RingOneVue title="收入" :data="theMonthIncome" />
				</view>
				<view class="statistics_class_chart_one">
					<RingOneVue title="支出" :data="theMonthExpenses" />
				</view>
			</view>
			<view class="index_list_box base_box" v-if="Object.keys(theMonthIncome).length > 0">
				<TextOneTitle2Vue left="收入" :right="moneySymbol+theMonthAll?.income" />
				<noneTextVue title="本月没有收入记录"
					v-if="theMonthIncome?.series[0]?.data[0]?.name=='无记录' ||theMonthIncome?.series[0]?.data.length==0" />
				<view @click="gotoClassDetail(item,1)" v-for="(item,index) in theMonthIncome?.series[0]?.data" v-else
					:key="item">
					<TextOneLine3Vue :first="item.name" :end="moneySymbol+item.value" :tag="1" />
				</view>
			</view>
			<view class="index_list_box base_box" v-if="Object.keys(theMonthExpenses).length > 0">
				<TextOneTitle2Vue left="支出" :right="moneySymbol+theMonthAll?.expenses" />
				<noneTextVue title="本月没有支出记录"
					v-if="theMonthExpenses?.series[0]?.data[0]?.name=='无记录' || theMonthExpenses?.series[0]?.data.length==0" />
				<view @click="gotoClassDetail(item,0)" v-for="(item,index) in theMonthExpenses?.series[0]?.data" v-else
					:key="item">
					<TextOneLine3Vue :first="item.name" :end="moneySymbol+item.value" :tag="0" />
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import monthSelectorVue from "@/components/monthSelector.vue";
	import noneTextVue from "@/components/base/noneText.vue";
	import TextOneTitle2Vue from "@/components/TextOneTitle2.vue";
	import TextOneLine3Vue from "@/components/TextOneLine3.vue";
	import monthMainDataVue from "@/components/monthMainData.vue";
	import RingOneVue from "@/components/RingOne.vue";
	import {
		dateTypeFormat,
		myShowToast,
		takeClassList
	} from "@/uitls/tool.js"

	import {
		computed,
		ref,
		watch
	} from 'vue'
	import {
		onShow,
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import store from '@/store/index.js';
	const moneySymbol = computed(() => store.state.setting.MoneySymbol)
	const gotoClassDetail = (x,y) => {
		uni.navigateTo({
			url: `/subPages/classDetail/classDetail?class=${x.name}&theMonth=${theMonth.value}&inOutTag=${y}`,
			animationType: 'zoom-fade-out',
		})
	}
	const theMonth = ref(dateTypeFormat('YYYY-mm', new Date(store.state.indexShowTime)))
	const toNowmonth = () => { // 恢复 当前月
		theMonth.value = dateTypeFormat('YYYY-mm', new Date())
		store.state.indexShowTime = dateTypeFormat('YYYY-mm-dd', new Date())
		uni.switchTab({
			url: "/pages/index/index"
		})
		myShowToast("已回到当前日期")
	}
	const theMonthIncome = ref({})
	const theMonthExpenses = ref({})
	const allData = store.state.mainData.allData

	const theMonthAll = ref()
	const gettheMonthAll = () => { // 总收入 支出
		let outer = {
			income: 0,
			expenses: 0
		}
		theMonthIncome.value.series[0].data.forEach((item) => {
			outer.income += item.value
		})
		theMonthExpenses.value.series[0].data.forEach((item) => {
			outer.expenses += item.value
		})
		return outer
	}

	const gettheMonthData = (showClass) => { // 获得 该月收入支出 饼状图数据
		let outer, data = []
		let max = 0
		if (allData[theMonth.value] != void 0) {
			let theClassList = takeClassList(allData[theMonth.value], item => item.showClass)[showClass]
			if (theClassList != void 0 && theClassList.length > 0) {
				theClassList.forEach(item => {
					let haveTag = false
					data.forEach((one) => {
						if (one.name == item.showOne) haveTag = true // 判断有无
					})
					if (!haveTag) {
						data.push({
							name: item.showOne,
							value: 0
						})
					}
					data.forEach((one) => {
						if (one.name == item.showOne) {
							one.value += parseFloat(item.addValue)
						}
					})
				})
			}
		}

		if (data.length == 0) {
			data = [{
				name: "无记录",
				value: 0
			}]
		}
		outer = {
			series: [{
				data
			}]
		}
		return outer
	}
	const monthChoose = (x) => {
		theMonth.value = x
	}
	const updateData = () => {
		theMonthIncome.value = gettheMonthData(1)
		theMonthExpenses.value = gettheMonthData(0)
		theMonthAll.value = gettheMonthAll()
	}
	const updateTimeData = () => {
		theMonth.value = dateTypeFormat('YYYY-mm', new Date(store.state.indexShowTime))
		updateData()
	}
	onShow(() => {
		let indexTime = dateTypeFormat('YYYY-mm', new Date(store.state.indexShowTime))
		if (theMonth.value != indexTime) {
			theMonth.value = indexTime
		}
		updateData()
	})
	watch(() => theMonth.value, (n) => updateData(), {
		immediate: true
	})
	defineExpose({
		updateTimeData
	}) // 暴露事件
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.statistics_top {
		display: flex;
		align-items: center;

		.statistics_time {
			font-weight: bold;
		}

		.statistics_clear {
			margin: 0 0.1em 0 0.5em;
			width: $iconSize_base;
			height: $iconSize_base;
		}
	}

	.statistics_scroll {
		height: calc(100vh - $mainHeaderHeight);
	}

	.statistics {
		display: flex;
		flex-direction: column;

		.statistics_main_chart {
			aspect-ratio: 3/2;
		}

		.statistics_class_chart {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.statistics_class_chart_one {
				width: 50%;
				height: 100%;
			}
		}
	}
</style>